require('../css/player.less');

document.ready(function () {
    // 判断用户是否登录
    window.utils.checkUserLogin()
    const BASE_URL = 'http://139.9.177.51:8099';
    //获取DOM节点
    // 视频
    const video = document.querySelector('#video');
    // 当前小节数
    const curPart = document.querySelector('#curPart');
    // 总小节数
    const sumPart = document.querySelector('#sumPart');
    // 视频标题
    const videoTitle = document.querySelector('#videoTitle');
    // 上一节按钮
    const prevBtn = document.querySelector('#prevBtn');
    // 下一节按钮
    const nextBtn = document.querySelector('#nextBtn');
    // 暂停按钮
    const stopBtn = document.querySelector('#stopBtn');
    // 蒙层
    const mask = document.querySelector('#mask');
    // 继续
    const continueBtn = document.querySelector('#continueBtn');
    // 结束
    const overBtn = document.querySelector('#overBtn');

    //获取本地视频数据
    const fragments = JSON.parse(window.localStorage.getItem('fragments')).fragments;
    // const courseData = JSON.parse(window.localStorage.getItem('fragments'));
    // console.log(courseData);
    // console.log(fragments);

    // 渲染页面
    sumPart.textContent = fragments.length;
    // 当前视频索引
    let index = 0;
    //视频播放
    function play() {
        //当前视频 视频地址
        video.src = `${BASE_URL}${fragments[index].videoUrl}`;
        //视频标题
        videoTitle.textContent = fragments[index].title;
        // 渲染当前视频小节数
        curPart.textContent = index + 1;
        // 延时视频播放避免冲途
        window.setTimeout(function () {
            video.play();
        }, 30);
    }
    play();
    calcProgress();
    // 查看当前视频播放完，自动播放下一个
    video.addEventListener('ended', function () {
        // 判断视频是否播放到最后一个
        if (index + 1 == fragments.length) { return };
        index += 1;
        play();
    })
    // 暂停
    stopBtn.addEventListener('click', function () {
        video.pause();;
        mask.style.display = 'block';
        // 暂停后清空定时器
        window.clearInterval(intervalId);
    })
    //上一节
    prevBtn.addEventListener('click', function () {
        if (index == 0) return;
        index -= 1;
        play();
    })
    //下一节
    nextBtn.addEventListener('click', function () {
        if (index + 1 == fragments.length) return;
        index += 1;
        play();
    })
    // 继续
    continueBtn.addEventListener('click', function () {
        video.play();
        mask.style.display = 'none';
        //继续计时
        calcProgress();
    })
    //存定时器的 intervalId
    let intervalId;
    //每个视频花费时间的数组
    let spend = [];
    function calcProgress() {
        //没隔一定时间渲染宽
        intervalId = window.setInterval(function () {
            //宽=当前视频的当前时间*100/总时间
            const toSetWidth = video.currentTime * 100 / video.duration;
            progress.style.width = `${toSetWidth}%`;
            //把得到的时间数据存到数组
            spend[index] = video.currentTime;
        }, 30)
    }
    //结束
    overBtn.addEventListener('click', function () {
        let total = 0;
        spend.forEach(function (item) {
            total += Number(item);
        });
        // 创建一个请求传参对象
        let toData = {
            id: location.search.split('=')[1],
            userId: JSON.parse(window.localStorage.getItem('user')).user.userId,
            takeTime: total,
            calorie: total * 1.3
        }
        //请求保存课程训练数据
        $http.post('/sports/saveTrain', toData, function (res) {
            if (res.status === 0) {
                window.utils.showToast(0, '保存成功', function () {
                    location.href = './course.html';
                })
            }
        })
    })
})